<template>
    <div>
			<div id="chartsId1" :style="{width: '900px', height: '500px'}" class="my-chart"></div>
    </div>
</template>

<script>
    export default {
			props: ['data', 'voice', 'val', 'name'],
			data(){
				return {

				}
			},
			watch: {
				data(){
					let data = this.data['全网声量数据：'];
					let val = this.val;
					let name = this.name;
					let myChart = this.$echarts.init(document.getElementById('chartsId1'));
					myChart.setOption({
						series: function (){
							let arr = [];
							for(let i = 0; i < val.length; i++){
								let obj = {};
								obj.name = name[i];
								obj.type = 'bar';
								obj.stack = '总量';
								obj.label = {
									normal: {
											show: true,
											position: 'inside'
									}
								}
								let varName = '';
								if(i == 0) varName = 'benpin_' + val[0];
								else varName = 'jingpin_' + val[i];
								obj.data = data[varName];
								arr.push(obj);
							}
							if(1){
								let obj = {};
								obj.name = '辅助';
								obj.type = 'bar';
								obj.stack = '总量';
								obj.barWidth = 30;
								obj.itemStyle = {
									normal: {
											barBorderColor: 'rgba(0,0,0,0)',
											color: 'rgba(0,0,0,0)'
									},
									emphasis: {
											barBorderColor: 'rgba(0,0,0,0)',
											color: 'rgba(0,0,0,0)'
									}
								}
								obj.data = data.kongbailie;
								arr.push(obj);
							}
							console.log('arr: ', arr);
							return arr;
						}()
					})
				}
			},
			mounted () {
				let myChart = this.$echarts.init(document.getElementById('chartsId1'));
				myChart.setOption({
					title: {
						text: '全网声量图',
					},
					tooltip : {
							trigger: 'axis',
							axisPointer : {            // 坐标轴指示器，坐标轴触发有效
									type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
							},
							formatter: function (params) {
								let str = params[1].name;
								for(let i = 1; i < params.length; i++){
									var tar = params[i];
									str += '<br/>' + tar.seriesName + ' : ' + tar.value;
								}
								return str;
							}
					},
					grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
					},
					xAxis: {
							type : 'category',
							splitLine: {show:false},
							data : ['全部','微博','微信','今日头条','网站新闻','论坛', '视频', '客户端']
					},
					yAxis: {
							type : 'value'
					},
					series: [
							{
									name: '辅助',
									type: 'bar',
									stack:  '总量',
									barWidth: 30,
									itemStyle: {
											normal: {
													barBorderColor: 'rgba(0,0,0,0)',
													color: 'rgba(0,0,0,0)'
											},
											emphasis: {
													barBorderColor: 'rgba(0,0,0,0)',
													color: 'rgba(0,0,0,0)'
											}
									},
									data: [0, 1700, 1400, 1200, 300, 0]
							},
							{
									name: '全部',
									type: 'bar',
									stack: '总量',
									barWidth: 20,
									label: {
											normal: {
													show: true,
													position: 'inside'
											}
									},
									data:[2900, 1200, 300, 200, 900, 300]
							}
					]
				})
			}
    }
</script>

<style scoped>

</style>